<template>
  <el-drawer v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form :model="info" ref="formRef" :rules="rules" label-position="right" label-width="120px" size="default"
      :scroll-to-error="true" :show-message="false">
      <el-form-item label="产品分类" prop="categoryIndex" required>
        <el-select v-model="info.categoryIndex" placeholder="请选择类型" style="width: 200px">
          <el-option label="窗膜" :value="0"></el-option>
          <el-option label="车衣" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品名称" required prop="name">
        <el-input v-model="info.name" placeholder="请输入产品名称" />
      </el-form-item>
      <el-form-item label="产品价格" required prop="price">
        <el-input-number v-model="info.price" placeholder="请输入产品价格" />
      </el-form-item>
      <el-form-item label="销量" prop="sales">
        <el-input-number v-model="info.sales" placeholder="请输入产品销量" />
      </el-form-item>
      <el-form-item label="宣传标语" prop="tagline">
        <el-input v-model="info.tagline" placeholder="请输入宣传标语" />
      </el-form-item>
      <el-form-item label="首页显示" prop="show_in_home">
        <el-switch v-model="info.show_in_home" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="产品图片" prop="image_url">
        <el-row>
          <el-button type="primary" @click="openUpload">选择图片</el-button>
          <div v-if="info.image_url != ''" class="img">
            <img :src="info.image_url" width="100" height="100" />
          </div>
          <el-text>建议上传尺寸: 800x600px, 格式: JPG/PNG</el-text>
        </el-row>
      </el-form-item>
      <el-form-item label="产品描述" prop="description" required>
        <Uediter v-model="info.description" @change="contentChangeFunc"></Uediter>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">确定</el-button>
      </div>
    </template>
    <Upload v-if="isupload" :isupload="isupload" :type="upload_type" @returnImgs="returnImgsFunc">上传图片</Upload>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, inject } from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { addApi, editApi } from "@/api/carfilm/homeproduct";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("");
const types = ["窗膜", "车衣"];
const ue = ref<any>(null);
const loading = ref(false);
const isupload = ref(false);
const upload_type = ref("");
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
  classList: {
    type: Array,
    default: [] as any[],
  },
});
const info = ref({
  id: 0,
  categoryIndex: 0,
  categoryName: "窗膜",
  name: "",
  price: 0.01,
  tagline: "",
  sales: 0,
  show_in_home: 1,
  description: "",
  image_url: "",
});

const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入产品名称",
    },
  ],
  image_url: [
    {
      required: true,
      message: "请上传产品图片",
    },
  ],
});

const emits = defineEmits(["doneSave"]);
const contentChangeFunc = (e: any) => {
  info.value.description = e;
};
const open_type = ref("");
const open = (type: string, row?: any) => {
  open_type.value = type;
  console.log(row);
  if (type == "edit") {
    dialogTitle.value = "编辑产品";
    info.value = {
      id: row.id,
      categoryIndex: row.categoryIndex,
      categoryName: row.categoryName,
      name: row.name,
      price: row.price,
      tagline: row.tagline,
      sales: row.sales,
      show_in_home: row.show_in_home,
      description: row.description,
      image_url: row.image_url,
    };
  } else if (type == "add") {
    dialogTitle.value = "添加产品";
    info.value = {
      id: 0,
      categoryIndex: 0,
      categoryName: "窗膜",
      name: "",
      price: 0.01,
      tagline: "",
      sales: 0,
      show_in_home: 1,
      description: "",
      image_url: "",
    };
  }
  dialogFormVisible.value = true;
};
const onSubmit = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      info.value.categoryName = types[info.value.categoryIndex];
      if (open_type.value == "add") {
        addApi(info.value)
          .then((data: any) => {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            dialogClose();
            emits("doneSave");
          })
          .catch((error) => {
            loading.value = false;
          });
      } else if (open_type.value == "edit") {
        editApi(info.value)
          .then((data: any) => {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            loading.value = false;
            dialogClose();
            emits("doneSave");
          })
          .catch((error) => {
            loading.value = false;
          });
      }
    }
  });
};

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const handleClose = () => {
  loading.value = false;
  formRef.value.resetFields();
  dialogFormVisible.value = false;
};
/*上传*/
const openUpload = (e: any) => {
  upload_type.value = e;
  isupload.value = true;
};
/*获取图片*/
const returnImgsFunc = (e: any) => {
  if (e != null && e.length > 0) {
    info.value.image_url = e[0].file_path;
  }
  isupload.value = false;
};
defineExpose({
  open,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
